import Taro from '@tarojs/taro';
import { Image } from '@tarojs/components';
import dayjs from 'dayjs';
import { useCountDown } from 'ahooks';
import classNames from 'classnames';
import { formatFilmPhoto, payment, openPay } from '@/utils';
import styles from './index.module.less';
import { getSubDesc } from '@/common/utils';
import { useUserStore } from '@/common/hox/userStore';

const orderCard = ({ item, onRefresh }: { item: Order.MovieOrderItem; onRefresh: () => void }) => {
    const { userInfo } = useUserStore();
    const [, { hours, minutes, seconds }] = useCountDown({
        targetDate:
            item.orderStatus == 1 ? dayjs(item.orderExpireTime).format('YYYY-MM-DD HH:mm:ss') : 0,
        onEnd: () => {
            onRefresh();
        },
    });
    // 查看详情
    const gotoOrderDetail = () => {
        Taro.navigateTo({
            url: `/pages/order/detail/index?orderNo=${item.id}`,
        });
    };

    // 支付
    const pay = (obj: any) => {
        if (userInfo?.purchaseType != 1) {
            return openPay(obj);
        }
        payment({
            orderNo: obj.orderNo,
            complete: () => {
                Taro.navigateTo({
                    url: `/pages/order/detail/index?orderNo=${obj.orderNo}`,
                });
            },
        });
    };

    return (
        <div className={styles.orderCard}>
            <div className={classNames(styles.row, styles.header)} onClick={gotoOrderDetail}>
                <div className={'title'}>{item.cinemaName}</div>
                <div
                    className={classNames(styles.orderStatus, {
                        [styles.red]: [1].includes(item.orderStatus),
                        [styles.yellow]: [2, 3].includes(item.orderStatus),
                        [styles.green]: [4].includes(item.orderStatus),
                    })}
                >
                    {item.orderStatusDesc}
                </div>
            </div>
            <div className={styles.line}></div>
            <div className={classNames(styles.movieInfo, styles.row)} onClick={gotoOrderDetail}>
                <Image
                    src={formatFilmPhoto(item.posterUrl)}
                    className={styles.moviePic}
                    mode="aspectFill"
                />
                <div className={styles.info}>
                    <div className={styles.row}>
                        <div className={styles.title}>{item.movieName}</div>
                        <div className={styles.num}>{item.seatTotal}张</div>
                    </div>
                    <div className={classNames(styles.row, styles.baseLine)}>
                        <div className={styles.time}>
                            {getSubDesc(item.showTime, true)
                                .split(' ')
                                .concat([dayjs(item.showTime).format('HH:mm'), '开场'])
                                .map((item, index) => {
                                    return (
                                        <span
                                            key={item}
                                            className={classNames(styles.inline, {
                                                [styles.bold]: index > 1,
                                            })}
                                        >
                                            {item}{' '}
                                        </span>
                                    );
                                })}
                        </div>
                        <div className={styles.price}>￥{item.paymentTotal}</div>
                    </div>
                    <div className={classNames(styles.row, styles.hallName)}>{item.hall}</div>
                    <div className={styles.row}>
                        <div>
                            {item.seatInfos.map(({ seatName }) => (
                                <span key={seatName} className={styles.seatNo}>
                                    {seatName}
                                </span>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
            <div className={styles.line}></div>
            <div className={classNames(styles.row, styles.footer)}>
                <div className={styles.time}>{item.orderTime}</div>
                {item.orderStatus === 1 && (
                    <div className={classNames(styles.btn, styles.main)} onClick={() => pay(item)}>
                        {[hours, minutes, seconds].map((item, index) =>
                            item <= 0
                                ? null
                                : String(item).padStart(2, '0') +
                                  (index === 0 ? '时' : index === 1 ? '分' : '秒')
                        )}
                        &nbsp;去支付
                    </div>
                )}
                {item.orderStatus !== 1 && (
                    <div className={styles.btn} onClick={gotoOrderDetail}>
                        查看详情
                    </div>
                )}
            </div>
        </div>
    );
};

export default orderCard;
